<template>
	<view>
		<!-- 等级说明 -->
		<view class="grade_box">
			<text class="tit">等级说明</text>
			<text>{{level_explain}}</text>
		</view>
		
		<view class="grade_box">
					<text class="tit">如何提升等级</text>
					<text>会员单笔充值额度达到等级充值额度时，自动提升对应等级</text>
				</view>
				
				
				
		<!--等级列表  -->
		<view class="grade_list">
			<view class="grade_list_top">
				<view class="user_grade">
					用户等级 (lv)
				</view>
				
				<view class="user_exp">
					单笔充值额度（￥）
				</view>
			</view>
			
			<view class="grade_list_content" v-for="(item,index) in list" :key="index">
				<view class="user_grade">
					{{item.name}}
				</view>
				
				<view class="user_exp">
					{{item.growth_credit}}
				</view>
			</view>
			
		
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				list: [],
				level_explain: ''
			};
		},
		onLoad() {
			this.getGradeInfo()
		},
		methods:{
			// 获取会员等级的信息
			getGradeInfo(){
				let that = this;
				app.globalRequest({
					api: app.getApi().user.vipGrade,
				}).then(res => {
					if (res.code == 1) {
						that.list = res.data.levelList
						that.level_explain = res.data.level_explain
					}
				}).catch(err => {
				
				})
			},
		}
	}
</script>

<style lang="scss" >
	page{
		background: #fff!important;
	}
	.grade_box{
		width: 90%;
		margin: 60rpx auto 0;
		display: flex;
		flex-direction: column;
		text{
			color: #333333;
			font-size: 28rpx;
			line-height: 50rpx;
		}
		.tit{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}
	
	.grade_list{
		width: 90%;
		margin: 40rpx auto;
		background-color: #FF7040;
		.grade_list_top{
			display: flex;
			align-items: center;
			.user_grade,.user_exp{
				width: 50%;
				text-align: center;
				height: 58rpx;
				line-height: 58rpx;
				
				color: #fff;
				font-size: 28rpx;
				border-right: 2rpx solid #fff;
			}
			.user_exp{
				border: 0;
			}
		}
		
		.grade_list_content{
			display: flex;
			align-items: center;
			background-color: #FFFBF7;
			.user_grade,.user_exp{
				width: 50%;
				text-align: center;
				height: 58rpx;
				line-height: 58rpx;
				
				color: #111111;
				font-size: 28rpx;
				border-right: 2rpx solid #fff;
			}
			.user_exp{
				border: 0;
			}
			
			
		}
	}
	.grade_list_content:nth-child(odd){
		background-color: #F9E8D1;
	}
</style>
